<template>
  <div>
    <!-- <h1>NodeJs留言板</h1> -->
    <h3>发表留言</h3>
    <form>
      你的名字:<input name="username" v-model="username" type="text"></input><br/><br/> 留言内容:
      <textarea name="content" v-model="content"></textarea><br/><br/>
      <button v-on:click="postMsg()">发表留言</button>
    </form>
    <div class="content-part">
    <h3>留言版</h3>
    <div v-for="list in message_list"> 
      <b>姓名:{{list.username}}</b>
      <p>内容:{{list.content}}</p>
      <button v-on:click="delMsg()"> 删除留言</button>
    </div>
    </div>
  </div>
</template>

<script>
module.exports = {
  data: function () {
    return {
      username: '',
      content: '',
      message_list: '[ ]'
    }
  },
  mounted: function () {
    this.$http.get('http://localhost:9900').then(messages => {
      messages = messages.body.messages
      this.message_list = messages
    })
  },
  methods: {
    postMsg: function () {
      var message = {
        'username': this.username,
        'content': this.content
      }
      this.$http.post('http://localhost:9900/add_msg', message).then(response => {
        // success callback
        // alert(message.username)
      }, response => {
        // error callback
        // return message
      })
    },
    delMsg: function () {
      var id = this.id
      this.$http.post('http://localhost:9900/del_msg', id).then(response => {
        // success callback
        // alert(message.username)
      }, response => {
        // error callback
        // return message
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content-part {
  width: 500px;
  margin: 0 auto;
  text-align: left;
}
.content-part h3 {
  text-align: center;
  border-bottom: 1px solid #888
}
.content-part div {
  background: #f2f2f2;
  padding: 10px; 
  margin-bottom: 10px;
}
</style>
